// 检查是否为移动端
function updateIsMobile() {
    return window.innerWidth <= 768;
}

// 初次加载时设置布局
let isMobile = updateIsMobile();

// 检查屏幕尺寸并设置类名
function updateLayoutClass() {
    const html = document.documentElement;
    html.className = isMobile ? 'mobile' : 'pc';
}

// 活动上传作品的开始时间和结束时间
let startTime = new Date(upStartTime).getTime(); // 使用时间戳
let endTime = new Date(upEndTime).getTime();
let awardsTime = new Date(awardTime).getTime();

// 获取当前时间的时间戳
function getCurrentTimeTimestamp(timeStr) {
    return new Date(timeStr).getTime();
}

// 检查当前时间是否在开始和结束时间范围内
function isWithinTimeRange(startTime, endTime) {
    let currentTimeN = getCurrentTimeTimestamp(currentTime);
    return currentTimeN >= startTime && currentTimeN <= endTime;
}

// 隐藏/显示获奖公示菜单项
function toggleAwardMenuVisibility() {
    // 获取 PC 和移动端的菜单项元素
    let pcAwardMenuItem = document.querySelector('.navi-block-menu li:nth-child(8)'); // PC版的第8个li
    let mobileAwardMenuItem = document.querySelector('.mobile-menu-content-list-item:nth-child(8)'); // 移动版的第8个项
    // 判断当前时间是否在结束时间之后
    if (getCurrentTimeTimestamp(currentTime) > awardsTime) {
        // 11月11日 00:00:00之后，显示获奖公示
        pcAwardMenuItem.style.display = 'flex';
        mobileAwardMenuItem.style.display = 'block';
    } else {
        // 11月11日之前，隐藏获奖公示
        pcAwardMenuItem.style.display = 'none';
        mobileAwardMenuItem.style.display = 'none';
    }
}

// 更新倒计时元素的显示
function updateCountdownElement(elementClass, days) {
    const countdownElement = document.querySelector(`.${elementClass}`);
    if (days > 0) {
        countdownElement.textContent = days.toString().padStart(2, '0');
    } else {
        countdownElement.textContent = '00';
    }
}

// 根据当前时间更新 fixed-card 的显示/隐藏状态和倒计时
function updateFixedCardAndCountdown() {
    const fixedCard = isMobile ? document.querySelector('.mb-fixed-card') : document.querySelector('.pc-fixed-card')
    if (isWithinTimeRange(startTime, endTime)) {
        // 计算倒计时
        let timeLeft = endTime - getCurrentTimeTimestamp(currentTime);
        let daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        updateCountdownElement('count-down-interval', daysLeft);
    } else {
        const countdownElement = document.querySelector('.count-down-interval');
        countdownElement.textContent = '00';
        fixedCard.style.display = 'none';
    }
}

// 检查滚动位置并控制fixed-card的显示和隐藏
function checkScrollPositionAndShowFixedCard() {
    const scrollPosition = window.scrollY;
    const videoPlayerHeight = document.querySelector('.pc-player-block').offsetHeight;
    const imgHeight = isMobile ? document.querySelector('.mobile-player-block').offsetHeight : videoPlayerHeight;
    const backTop = document.querySelector('.back-top');
    const mbFixedCard = document.querySelector('.mb-fixed-card');
    const pcFixedCard = document.querySelector('.pc-fixed-card');

    // 显示或隐藏返回顶部按钮
    backTop.style.display = (scrollPosition > (isMobile ? imgHeight : videoPlayerHeight)) ? 'block' : 'none';

    // 检查时间范围
    if (!isWithinTimeRange(startTime, endTime)) {
        mbFixedCard.style.display = 'none'; // 确保活动时间外不显示
        pcFixedCard.style.display = 'none';
        return; // 直接返回，不再执行后面的代码
    }

    // 显示或隐藏固定卡片
    if (isMobile) {
        pcFixedCard.style.display = 'none';
        mbFixedCard.style.display = (scrollPosition > imgHeight) ? 'block' : 'none';
    } else {
        mbFixedCard.style.display = 'none';
        pcFixedCard.style.display = (scrollPosition > videoPlayerHeight) ? 'block' : 'none';
    }
}

// 平滑返回顶部
function backToTop() {
    document.querySelector('.back-top').addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth' // 实现平滑滚动
        });
    });
}

/**
 * 初始化菜单项的点击事件处理，包括高亮和滚动到相应部分的功能。
 */
function initializeMenuInteractions() {
    const menuList = isMobile ? document.querySelectorAll('.mobile-menu-content-list div') : document.querySelectorAll('.navi-block-menu li');
    const sectionIds = isMobile
        ? ['mb-activity-introduction-title', 'mb-event-progress-title', 'mb-event-description-title', 'mb-submission-principles-title', 'mb-evaluation-criteria-title', 'mb-organizer-title']
        : ['activity-introduction-title', 'event-progress-title', 'event-description-title', 'submission-principles-title', 'evaluation-criteria-title', 'organizer-title'];

    menuList.forEach((item, index) => {
        item.addEventListener('click', () => {
            // 移除所有菜单项的高亮
            menuList.forEach(li => li.classList.remove('active'));
            // 为当前点击的菜单项添加高亮
            item.classList.add('active');

            const sectionId = sectionIds[index];
            const currentURL = window.location.href;

            // 判断点击的菜单项是否为“全部作品”或“获奖公示”
            if (index === menuList.length - 2 || index === menuList.length - 1) {
                // 直接跳转到相应页面
                if (index === menuList.length - 2) {
                    window.location.href = 'all-works.ftl';
                } else {
                    window.location.href = 'award-announcement.ftl';
                }
            } else {
                // 其他菜单项的处理逻辑
                if (!currentURL.includes('index.ftl')) {
                    window.location.href = `index.ftl?section=${sectionId}`;
                    if (isMobile) closeMenu(); // 移动端关闭菜单
                } else {
                    toAnchorView(sectionId); // 在当前页面直接滚动
                    if (isMobile) closeMenu(); // 移动端关闭菜单
                }
            }
        });
    });
}

// 滚动检测高亮函数
function highlightOnScroll() {
    const sections = isMobile
        ? document.querySelectorAll('.intro-card-title-img-mb')
        : document.querySelectorAll('.intro-card-title-img');
    const menuList = isMobile
        ? Array.from(document.querySelectorAll('.mobile-menu-content-list div')).slice(0, -2)
        : Array.from(document.querySelectorAll('.navi-block-menu li')).slice(0, -2);
    const range = isMobile ? 100 : 300; // 可视区域范围
    const rects = Array.from(sections).map(section => section.getBoundingClientRect());
    let activeIndex = -1;
    for (let i = 0; i < rects.length; i++) {
        const rect = rects[i];
        // 标题处于可视范围内时，立即高亮第一个符合条件的标题
        if (rect.top >= 0 && rect.top <= range) {
            activeIndex = i;
            // console.log('1',activeIndex)
            break;
        }
        // 上一个标题已超出可视区域，但下一个标题未进入可视区域底部
        if (rect.top < 0 && rects[i + 1] && rects[i + 1].top > document.documentElement.clientHeight) {
            activeIndex = i;
            // console.log('2',activeIndex)
            break;
        }
        // 上一个标题已超出可视区域，但下一（多）个标题已进入可视区域但小于range区域
        if (rect.top < 0 && rects[i + 1] && (rects[i + 1].top < document.documentElement.clientHeight && rects[i + 1].top > range)) {
            activeIndex = i;
            // console.log('3',activeIndex)
            break;
        }
        // 最后一个标题特殊处理：滚动到底部时高亮
        if (rect.top < 0 && !rects[i + 1]) {
            activeIndex = i;
            // console.log('5',activeIndex)
        }
    }
    // 重置所有菜单的高亮
    menuList.forEach(li => li.classList.remove('active'));
    // 为检测到的当前区域对应的菜单项添加高亮
    if (activeIndex !== -1) {
        const activeSection = sections[activeIndex].getAttribute('data-section');
        menuList.forEach(item => {
            if (item.getAttribute('data-section') === activeSection) {
                item.classList.add('active');
            }
        });
    }
}

// 防抖函数
function debounce(func, delay) {
    let timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(func, delay);
    };
}
const debouncedHighlightOnScroll = debounce(highlightOnScroll, 100);

// 平滑过渡到对应区域 - 执行函数
function toAnchorView(data) {
    const $choose = document.querySelector(`.${data}`);
    if ($choose) {
        $choose.scrollIntoView({ behavior: 'smooth', block: 'start' });
        window.scrollTo({
            left: 0,
            top: $choose.offsetTop - 80,
            behavior: 'smooth'
        });
    }
}

// 控制导航菜单的sticky切换
function toggleStickyNavigation() {
    const playerBlockHeight = document.querySelector(".pc-player-block").offsetHeight;
    const menu = document.querySelector(".navi-block-menu");
    const currScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY;
    if (currScrollTop > playerBlockHeight) {
        menu.classList.remove("navi-default");
        menu.classList.add("navi-sticky");
    } else {
        menu.classList.remove("navi-sticky");
        menu.classList.add("navi-default");
    }
}

// 背景图“立即报名”点击跳转页面
function badgeClickJump() {
    const pcUploadBtn = document.querySelector('.img-pc-upload-size')
    const mobileUploadBtn = document.querySelector('.img-mb-upload-size')
    // 绑定pc背景上传按钮点击跳转事件
    if (pcUploadBtn) {
        pcUploadBtn.addEventListener('click', function() {
            window.location.href = "upload-work.ftl";
        });
    }
    // 绑定mb背景上传按钮点击跳转事件
    if (mobileUploadBtn) {
        mobileUploadBtn.addEventListener('click', function() {
            window.location.href = "upload-work.ftl";
        });
    }
}

// 立即报名
function signUpNow() {
    const fixedCard = isMobile ? document.querySelector('.mb-fixed-card') : document.querySelector('.pc-fixed-card')
    const imgBtn = isMobile ? document.querySelector('.img-mb-upload-size') : document.querySelector('.img-pc-upload-size');
    const btn = isMobile ? document.querySelector('.mb-upload-btn') : document.querySelector('.pc-upload-btn');
    if (imgBtn) {
        // 检查当前时间是否在活动时间范围内
        if (!isWithinTimeRange(startTime, endTime)) {
            fixedCard.style.display = 'none';
            imgBtn.style.display = 'none';
        } else {
            btn.addEventListener('click', () => {
                window.location.href = "upload-work.ftl";
            });
        }
    }
}

// 从其他页面点击-平滑滚动到目标部分
function scrollToSection() {
    const urlParams = new URLSearchParams(window.location.search);
    const section = urlParams.get('section');
    if (section) {
        toAnchorView(section);
        // 设置高亮对应的li
        const menuItems = isMobile ? document.querySelectorAll('.mobile-menu-content-list div') : document.querySelectorAll('.navi-block-menu li');
        menuItems.forEach((item) => {
            if (item.getAttribute('data-section') === section) {
                menuItems.forEach(li => li.classList.remove('active')); // 移除所有li的active类
                item.classList.add('active'); // 添加高亮
            }
        });
    }
}

// 根据设备加载注意事项内容
function loadContentBasedOnDevice() {
    const contentDiv = document.querySelector('.matters-needing-attention');
    const switchContent = document.querySelector('.switch-content');
    const entryInstructionsHTML = `
        <div class="entry-instructions">
            <div class="entry-instructions-title">
                <img src="./assets/mb-streamer-left.png" alt="">
                <h5>参赛须知</h5>
                <img src="./assets/mb-streamer-right.png" alt="">
            </div>
            <p>（一）作品不得包含违反中华人民共和国法律法规的内容，不得包含涉及与性别、宗教相关的歧视性内容，不得侵犯他人隐私，如由此引起的相关法律后果均由参赛者承担；</p>
            <p>（二）作品必须为原创，集体创作作品参赛需征得主创人员的同意，所有作者签名确认方可投稿。参赛者提交的作品不得侵犯第三方的任何著作权、商标权或其他权利，不得违反相关法律法规和公共道德习俗。凡涉及抄袭、剽窃、损害第三方合法权益等行为，参赛者应承担全部法律责任，与主办单位及组委会无关，并且组委会有权取消其参赛资格。</p>
        </div>`;

    const copyrightDescriptionHTML = `
        <div class="copyright-descriptions">
            <div class="copyright-descriptions-title">
                <img src="./assets/mb-streamer-left.png" alt="">
                <h5>版权说明</h5>
                <img src="./assets/mb-streamer-right.png" alt="">
            </div>
            <p>获奖作品著作权归主办方所有，作者拥有署名权。</p>
        </div>`;

    const pcContent = [
        `<p class="pc-p">（一）作品不得包含违反中华人民共和国法律法规的内容，不得包含涉及与性别、宗教相关的歧视性内容，不得侵犯他人隐私，如由此引起的相关法律后果均由参赛者承担；</p>
         <p class="pc-p">（二）作品必须为原创，集体创作作品参赛需征得主创人员的同意，所有作者签名确认方可投稿。参赛者提交的作品不得侵犯第三方的任何著作权、商标权或其他权利，不得违反相关法律法规和公共道德习俗。凡涉及抄袭、剽窃、损害第三方合法权益等行为，参赛者应承担全部法律责任，与主办单位及组委会无关，并且组委会有权取消其参赛资格。</p>`,
        `<p class="pc-p">获奖作品著作权归主办方所有，作者拥有署名权。</p>`
    ];

    if (isMobile) {
        // 如果是移动端，展示全部内容并隐藏PC的切换
        contentDiv.innerHTML = entryInstructionsHTML + copyrightDescriptionHTML;
    } else {
        // 检查当前高亮的tab，显示对应的内容
        const activeTabIndex = [...switchContent.children].findIndex(tab => tab.classList.contains('active'));
        // 如果是PC端，展示切换tab和默认的参赛须知内容
        contentDiv.innerHTML = pcContent[activeTabIndex];
        toggleMattersNeedingAttention(); // 初始化切换功能
    }
}

// 参赛须知与版权说明切换
function toggleMattersNeedingAttention() {
    const tabs = document.querySelectorAll('.switch-content div');
    const content = document.querySelector('.matters-needing-attention');

    const contents = [
        `<p class="pc-p">（一）作品不得包含违反中华人民共和国法律法规的内容，不得包含涉及与性别、宗教相关的歧视性内容，不得侵犯他人隐私，如由此引起的相关法律后果均由参赛者承担；</p>
         <p class="pc-p">（二）作品必须为原创，集体创作作品参赛需征得主创人员的同意，所有作者签名确认方可投稿。参赛者提交的作品不得侵犯第三方的任何著作权、商标权或其他权利，不得违反相关法律法规和公共道德习俗。凡涉及抄袭、剽窃、损害第三方合法权益等行为，参赛者应承担全部法律责任，与主办单位及组委会无关，并且组委会有权取消其参赛资格。</p>`,
        `<p class="pc-p">获奖作品著作权归主办方所有，作者拥有署名权。</p>`
    ];

    tabs.forEach((tab, index) => {
        tab.addEventListener('click', () => {
            // 切换 active 类
            tabs.forEach(div => div.classList.remove('active'));
            tab.classList.add('active');
            // 更新内容
            content.innerHTML = contents[index];
        });
    });
}

// 移动端-打开菜单
function openMenu() {
    const menuDom = document.querySelector('.mobile-menu-content');
    if (menuDom) {
        menuDom.style.display = 'flex';
        menuDom.className = `mobile-menu-content menu-content-show`;
    }
}

// 移动端-关闭菜单
function closeMenu() {
    const menuDom = document.querySelector('.mobile-menu-content');
    if (menuDom) {
        menuDom.className = `mobile-menu-content menu-content-close`;
    }
}

function controlShare() {
    const shareBtn = document.querySelector('.share-btn');
    const modal = document.querySelector('.modal');
    const closeBtn = document.querySelector('.close-btn');
    const qrContainer = document.getElementById('qrcode');
    const shareLink = window.location.href.split('#')[0];
    const copyBtn = document.querySelector('.modal-content__footer__btn');
    const linkText = document.querySelector('.modal-content__footer__link');
    // 设置分享链接显示
    linkText.textContent = `${shareLink}`;
    qrContainer.innerHTML = ''; // 清空之前的二维码
    $.ajax({
        url: "https://www.animeta.com.cn/admin-api/publics/weixin/mp/createJsapiSignature",
        type: "POST",
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify({'appId': 'wx4e1526214488bd6e', 'url': shareLink}),
        success: res => {
            // 初始化微信分享配置
            wx.config({
                debug: false,
                appId: 'wx4e1526214488bd6e',
                timestamp: res.data.timestamp,
                nonceStr: res.data.nonceStr,
                signature: res.data.signature,
                jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
            });
            // 设置分享内容
            wx.ready(() => {
                console.log('wx.ready', res);
                const shareData = {
                    title: "2024年首届“动画宇宙”杯校园数字创意大赛",
                    desc: "为艺术生、创作者和爱好者提供一个平台，激发他们的无限创造力。鼓励参赛者突破传统的艺术表现形式和思维模式，勇于尝试新的工具、技法和理念，创造出具有独特个性和创新精神的艺术作品。通过大赛的激励机制，激发人们内心深处的创造潜能，推动艺术领域的不断创新和发展。",
                    link: shareLink,
                    imgUrl: "https://www.animeta.com.cn/static/imgs/home-page/admin-logo.png"
                };
                wx.updateAppMessageShareData(shareData);
                wx.updateTimelineShareData(shareData);
            });

            // 创建二维码
            const qr = qrcode(0, 'H');
            qr.addData(shareLink);
            qr.make();
            qrContainer.innerHTML = qr.createImgTag(2);
        },
        error: err => {
            console.error('微信签名请求失败', err);
        }
    })

    // 点击复制链接
    copyBtn.addEventListener('click', function() {
        navigator.clipboard.writeText(shareLink).then(() => {
            // 显示气泡提示
            const tooltip = document.getElementById('tooltip');
            tooltip.style.display = 'block';
            setTimeout(() => {
                tooltip.style.opacity = '1'; // 淡入效果
            }, 10); // 稍微延迟以确保 display 已设置

            // 延时 1.25 秒后淡出并隐藏气泡提示
            setTimeout(() => {
                tooltip.style.opacity = '0'; // 淡出效果
                setTimeout(() => {
                    tooltip.style.display = 'none'; // 动画结束后隐藏
                }, 300); // 与 transition 时间同步
            }, 1250);
        }).catch(err => {
            console.error('复制失败', err);
        });
    });


    // 点击分享按钮，显示弹窗
    shareBtn.addEventListener('click', function() {
        modal.style.display = 'flex'; // 显示弹窗
    });

    // 点击关闭按钮，隐藏弹窗
    closeBtn.addEventListener('click', function() {
        modal.style.display = 'none'; // 隐藏弹窗
    });

    // 点击蒙层，隐藏弹窗
    modal.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none'; // 隐藏弹窗
        }
    });
}

window.addEventListener('scroll', () => {
    updateFixedCardAndCountdown()
    checkScrollPositionAndShowFixedCard()
    // 控制导航菜单的sticky切换
    toggleStickyNavigation()
    // 防抖-滚动检测高亮函数
    debouncedHighlightOnScroll();
});

window.addEventListener('DOMContentLoaded', () => {
    // 检查屏幕尺寸并设置类名
    updateLayoutClass()
    // 从其他页面点击-平滑滚动到目标部分
    scrollToSection()
    // 根据当前时间更新 fixed-card 的显示/隐藏状态和倒计时
    updateFixedCardAndCountdown()
    // 平滑返回顶部
    backToTop()
    // 背景图“立即报名”点击跳转页面
    badgeClickJump()
    // 立即报名
    signUpNow()
    // 初始化菜单项的点击事件处理，包括高亮和滚动到相应部分的功能。
    initializeMenuInteractions()
    // 参赛须知与版权说明切换
    toggleMattersNeedingAttention()
    // 检查滚动位置并控制fixed-card的显示和隐藏
    checkScrollPositionAndShowFixedCard()
    // 根据设备加载注意事项内容
    loadContentBasedOnDevice()
    // 隐藏/显示获奖公示菜单项
    toggleAwardMenuVisibility()
    // 控制分享
    controlShare()
})

// 监听窗口大小变化
window.addEventListener('resize', () => {
    // 重新检查屏幕尺寸
    isMobile = updateIsMobile();
    updateLayoutClass()
    // scrollToSection()
    updateFixedCardAndCountdown()
    // backToTop()
    badgeClickJump()
    signUpNow()
    initializeMenuInteractions()
    toggleMattersNeedingAttention()
    checkScrollPositionAndShowFixedCard()
    loadContentBasedOnDevice()
    toggleAwardMenuVisibility()
})
